<template>
  <div class="cardArchive">
    <h2 class="header">
      {{ title }}
    </h2>
    <n-space class="content" vertical>
      <template v-for="(item, index) in list" :key="index">
        <div class="link">
          <h3 class="time">{{ $dayjs(item.createTime).format("MM-DD") }}</h3>
          <n-button class="text" @click="toPost(item.id)" text>
            {{ item.title }}
          </n-button>
        </div>
      </template>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { NCard, NSpace, NButton } from "naive-ui";
import type { PropType } from "vue";
import type { postsArchive } from "~/api/post";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  list: {
    type: Array as PropType<postsArchive[]>,
    required: true,
  },
});
const toPost = (id: string) => {
  navigateTo(`/post/${id}`);
};
const { title, list } = props;
</script>
<style lang="scss" scoped>
.cardArchive {
  margin: 10px 0px;
  background-color: white;
  padding: 20px;
  border-radius: 5px;

  .header {
    margin: 0px;
  }

  .content {
    margin-top: 20px;
  }

  .link {
    display: flex;
    align-items: flex-start;
    margin-left: 10px;
    margin: 20px 0;

    .time {
      margin: 0;
      margin-right: 10px;
      color: rgb(156, 163, 175);
      white-space: nowrap;
      line-height: 1.5rem;
    }

    .text {
      text-align: left;
      flex: 1;
      font-size: 1rem;
      line-height: 1.5rem;
      white-space: unset;
      display: -webkit-box;
      /* 使用弹性盒模型 */
      -webkit-box-orient: vertical;
      /* 设置盒模型的方向为垂直 */
      -webkit-line-clamp: 2;
      /* 设置最多显示两行 */
      overflow: hidden;
      /* 隐藏溢出的内容 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }

  }
}
</style>
